<template>
  <!-- Gitee / GitHub 访问量占比 -->
  <div ref="echartsRef" class="echarts"></div>
</template>
<script setup lang="ts" name="pie">
import { ref } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/utils/useEcharts";

const echartsRef = ref<HTMLElement>();
const initChart = (data: any) => {
  const myChart: echarts.ECharts = echarts.init(
    echartsRef.value as HTMLElement
  );
  const option: echarts.EChartsOption = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "2%",
      orient: "vertical",
      icon: "circle", //图例形状
      align: "left",
      itemGap: 20,
      textStyle: {
        fontSize: 13,
        fontWeight: 500,
      },
      formatter: function (name: string) {
        let dataCopy = "";
        for (let i = 0; i < data.length; i++) {
          if (data[i].name == name && data[i].value >= 10000) {
            dataCopy = (data[i].value / 10000).toFixed(2);
            return name + "      " + dataCopy + "w";
          } else if (data[i].name == name) {
            dataCopy = data[i].value;
            return name + "      " + dataCopy;
          }
        }
        return "";
      },
    },
    series: [
      {
        name: "地区",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          length: 180,
          length2: 50,
          lineStyle: {
            width: 1,
          },
        },
        startAngle: 180,
        label: {
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          position: "outside",
          formatter: "{b}\n {d}%",
          show: true,
          fontWeight: 400,
          fontSize: 10,
        },
      },
    ],
  };
  useEcharts(myChart, option);
};
defineExpose({
  initChart,
});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
